<template>
  <div class="app-container">
    
<br>
<br>
    <el-button type="primary" @click="add">添加部门</el-button>
    <br>
    <br>
    <el-table :data="list" style="width: 100%;margin-bottom: 20px;" row-key="id" border  :tree-props="{children: 'children', hasChildren: 'hasChildren'}" 
    :default-expand-all="true" :indent=60
    >
      <el-table-column prop="name" label="部门名称"  width="300" align="left"></el-table-column>
      <el-table-column prop="phone" label="部门电话"  width="130" align="center"></el-table-column>
      <el-table-column prop="managerName" label="部门主管"  width="130" align="center"></el-table-column>
      <el-table-column prop="managerPhone" label="主管电话"  width="130" align="center"></el-table-column>
      <el-table-column prop="address" label="部门地址"  width="300" align="center"></el-table-column>
      <el-table-column label="操作" width="300" align="center">
        <template slot-scope="scope" >
          <el-button type="primary"  @click="add(scope.row)" size="small">添加子部门</el-button>
          <el-button type="success"  @click="update(scope.row)" size="small">修改</el-button>
          <el-button type="danger" @click="deleteInfo(scope)" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="新增部门" :visible.sync="addDeptVisible" :closeOnClickModal="false">
        <h2>部门信息</h2>
        <el-form ref="form" :model="form" label-width="80px" :rules="formRules">
          <el-form-item v-if="false" label="上级部门id">
            <el-input v-model="form.pid" :disabled="true" />
          </el-form-item>
          <el-form-item label="上级部门">
            <el-select style="width:100%" v-model="form.pid" placeholder="请选择" :disabled="true">
              <el-option
                v-for="item in depts"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="false" label="部门id">
              <el-input v-model="form.id" :disabled="true" />
          </el-form-item>
          <el-form-item label="部门名称" prop="name">
              <el-input v-model="form.name" />
          </el-form-item>
          <el-form-item label="部门电话">
              <el-input v-model="form.phone" />
          </el-form-item>
          <el-form-item label="部门主管">
            <el-select style="width:100%" v-model="form.manager" placeholder="请选择">
              <el-option
                v-for="item in users"
                :key="item.id"
                :label="item.name"
                :value="item.id"
                @click.native="selectManager(item)"
                >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="主管电话">
              <el-input v-model="form.managerPhone" :disabled="true" />
          </el-form-item>
          <el-form-item label="部门地址">
              <el-input v-model="form.address" />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" @click="confirm">确 定</el-button>
            <div style="width:200px;display: inline-block;"> </div>
            <el-button @click="cancel">取 消</el-button>
          </div>
        </template>
    </el-dialog>
    <el-dialog title="修改部门" :visible.sync="upDeptVisible" :closeOnClickModal="false">
        <h2>部门信息</h2>
        <el-form ref="form" :model="form" label-width="80px" :rules="formRules">
          <el-form-item label="上级部门">
            <el-select style="width:100%" v-model="form.pid" placeholder="请选择" :disabled="form.pid === 0">
              <el-option
                v-for="item in depts"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="false" label="部门id">
              <el-input v-model="form.id" :disabled="true" />
          </el-form-item>
          <el-form-item label="部门名称" prop="name">
              <el-input v-model="form.name"/>
          </el-form-item>
          <el-form-item label="部门电话">
              <el-input v-model="form.phone" />
          </el-form-item>
          <el-form-item label="部门主管">
            <el-select style="width:100%" v-model="form.manager" placeholder="请选择">
              <el-option
                v-for="item in users"
                :key="item.id"
                :label="item.name"
                :value="item.id"
                @click.native="selectManager(item)"
                >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="主管电话">
              <el-input v-model="form.managerPhone" :disabled="true" />
          </el-form-item>
          <el-form-item label="部门地址">
              <el-input v-model="form.address" />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" @click="confirm">确 定</el-button>
            <div style="width:200px;display: inline-block;"> </div>
            <el-button @click="cancel">取 消</el-button>
          </div>
        </template>
    </el-dialog>
  </div>
</template>

<script>

import { getList, treeList, add, edit, del} from '@/api/dept'
import { getList as userList} from '@/api/user'

export default {
  name: "DeptList",
  filters: {

  },
  data() {
    const validateName = (rule, value, callback) => {
      if (!value) callback(new Error('请输入名称')) 
      else callback()
    }
     return {
      list: [],
      listLoading: true,
      currentPage: 1,
      pageSize: 10,
      total: 20,
      curIndex: -1,
      infoVisible: false,
      upDeptVisible: false,
      addDeptVisible: false,
      info: {},
      form: {},
      dialogTitle: '添加部门',
      depts:[],
      users:[],
      formRules: {
        name: [{ required: true, trigger: 'blur', validator: validateName }],
      },
    }
  },
  created() {
    
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      treeList().then(res=>{
        console.log("treeRes", res.data)
        this.list = res.data
        this.listLoading = false
        userList({currentPage: 1, pageSize: 500})
        .then(userList=>{
          this.users = userList.data.records
          getList().then(deptList=>{
            console.log(deptList)
            this.depts = deptList.data
          })
        })
      }).catch(err=>{
        console.log("err")
        console.log(err)
        this.listLoading = false
      })
    },
    clickCurPage(val){
      this.currentPage = val
      this.fetchData()
    },
    getInfo(row) {
      this.info = row
      this.infoVisible = true
    },
    update(row) {
      this.reset()
      this.dialogTitle = '修改部门'
      this.form = JSON.parse(JSON.stringify(row))
      this.$set(this.form, 'pid', row.pid)
      this.$set(this.form, 'pName', row.pName)
      this.$set(this.form, 'manager', row.manager)
      console.log(this.form)
      this.upDeptVisible = true
    },
    deleteInfo(scope) {
      console.log(scope.row)
      this.$confirm('确定删除该部门?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        del(scope.row.id).then(res=>{
          this.list.splice(scope.$index, 1)
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.$tab.refreshPage({path: '/dept/deptList', name: "DeptList"});
          this.fetchData()
        }).catch(err=>{
          console.log(err)
        })
        
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    },
    add(row) {
      this.reset()
      this.form.pid = row.id
      this.form.pName = row.name
      this.dialogTitle = '添加部门'
      this.addDeptVisible = true
    },
    confirm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          if(this.form.id) {  // update
            edit(this.form).then(res=>{
              console.log(res)
              this.$message({
                message: '修改成功',
                type: 'success'
              })
              this.upDeptVisible = false
              this.listLoading = false
              this.$tab.refreshPage({path: '/dept/deptList', name: "DeptList"})
              // this.fetchData()
            }).catch(err=>{
              console.log(err)
            })
          } else { // add
            console.log(this.form)
            if(!this.form.pid) {
              this.form.pid = 0
            }
            add(this.form).then(res=>{
              this.$message({
                message: '添加成功',
                type: 'success'
              })
              this.addDeptVisible = false
              this.listLoading = false
              this.$tab.refreshPage({path: '/dept/deptList', name: "DeptList"});
              this.fetchData()
            }).catch(err=>{
              console.log(err)
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
      
    },
    cancel() {
      console.log(this.form)
      this.upDeptVisible = false
      this.addDeptVisible = false
    },
    reset(){
      this.form = {}
    },
    selectManager(user) {
      this.$set(this.form, 'manager', user.id)
      this.$set(this.form, 'managerName', user.name)
      this.$set(this.form, 'managerPhone', user.phone)
    }
  }
}
</script>
